import { reactive, ref, shallowRef } from 'vue'
import * as Lang from '@/config'

export type SizeType = 'large' | 'default' | 'small'
export interface UseElementPlusGlobalParams {
  zIndex?: number
  size?: SizeType
  locale?: keyof typeof Lang
  autoInsertSpace?: boolean
  messageMax?: number
}

export const useElementPlusGlobal = (options?: UseElementPlusGlobalParams) => {
  const { zIndex, size, locale, autoInsertSpace, messageMax } = Object.assign(
    {
      zIndex: 3000,
      size: 'small',
      locale: 'ZhCn',
      autoInsertSpace: true,
      messageMax: 3
    },
    options
  )
  // 全局初始化 zIndex 的值
  const _zIndex = ref(zIndex)
  // 全局组件大小
  const _size = ref<SizeType>(size)
  // 配置多语言
  const _locale = shallowRef(Lang[locale])
  // 对按钮进行配置
  const button = reactive({
    autoInsertSpace
  })
  // 对消息进行配置
  const message = reactive({
    // 最多弹出 3 个消息提示框
    max: messageMax
  })

  const setSize = (v: SizeType) => {
    _size.value = v
  }

  return { zIndex: _zIndex, size: _size, setSize, locale: _locale, button, message }
}
